<template>
    <div id="testsuspense">
        <Suspense>
            <template #default>
                <asyncComponent></asyncComponent>
            </template>
            <template #fallback>
                <div style="font-size: 20px;">正在加载中Loading...</div>
            </template>
        </Suspense>
    </div>
</template>
<script>
    import { defineAsyncComponent } from 'vue';
    export default {
        components: {
            asyncComponent: defineAsyncComponent(() => import('./asyncComponent.vue')),
        }
    }
    /**
     * 在前后端交互获取数据时， 是一个异步过程，一般我们都会提供一个加载中的动画;
     * Vue3.x 新出的内置组件Suspense, 它提供两个template slot, 刚开始会渲染一个 fallback 状态下的内容，
     * 直到到达某个条件后才会渲染 default 状态的正式内容;
     * 如果使用 Suspense, 在default对应的异步组件中需要返回一个 promise;
     */
</script>